<template>
    <div class="common-layout">
        <el-container>
            <el-header style="padding: 0px !important;">
                <div class="navbar-wrap">
                    <!-- 导航 -->
                    <!-- 下拉白底样式 scroll-white 下拉黑底样式scroll-black head-fixed固定-->
                    <div class="new-nav-page scroll-white " style="width: 100%;">
                        <headerCon></headerCon>
                    </div>
                </div>
            </el-header>
            <el-container class="personal-center-content">
                <el-aside width="260px" style="    overflow: hidden !important;">
                    <div class="left-user-info">
                        <div class="left-user-center">
                            <div class="top-user-card">
                                <div class="user-info-hd">
                                    <a @click="jumpUrl">
                                        <img class="user-img"
                                            :src="userInfo.avatar"
                                            alt=""  onerror="javascript:this.src='https://static.3d66.com/public/images/common/defaultHead.jpg'">
                                    </a>
                                    <div class="hd-right">
                                        <div class="user-name">{{userInfo.username}}</div>
                                    </div>
                                </div>
                                <div class="user-info-bd">
                                    <span>ID：<span id="user-center-id">{{userInfo.label_id}}</span></span>
                                    <!-- <span class="line">|</span>
                                    <span>未认证作者</span> -->
                                </div>
                            </div>
                            <div class="page-topic">个人中心</div>
                            <div>
                                <LeftMenu :menuData="menuList"></LeftMenu>
                            </div>
                        </div>
                    </div>
                </el-aside>
                <el-container>
                    <el-main style="padding: 0 !important;">
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
        <footerContent></footerContent>
    </div>
</template>
<script setup lang="ts">
import footerContent from "/@/components/footerContent.vue";
import headerCon from "/@/components/header.vue";
import LeftMenu from "/@/components/user/LeftMenu.vue";
import { ref, onMounted, onBeforeMount } from "vue";
import { getUserMenu } from '../../api/user/index'
import { useUserInfo } from '../../stores/userInfo'
import router from '../../router'
const userInfo = useUserInfo() //获取用户信息
onBeforeMount(() => {
    document.body.style.backgroundColor = "#F7F8FA";
})
const menuList = ref([])

const getMenuUserList = () => {
    getUserMenu({}).then(res=>{
        menuList.value = res.data
    })
}

const jumpUrl = () =>{
    router.push({ path:'/user/pwd' })
}


onMounted(()=>{
    getMenuUserList()
})
</script>
<style scoped>
.left-user-info {
    margin-right: 24px;
    width: 248px;
    min-width: 248px;
    border-radius: 12px;
    position: relative;
}

.left-user-info .left-user-center {
    background: #FFF;
    padding-bottom: 70px;
    border-radius: 0 0 12px 12px;
}

.left-user-info .top-user-card {
    padding: 24px 24px 16px;
}

.left-user-info .top-user-card .user-info-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.left-user-info .top-user-card .user-info-hd>a {
    position: relative;
    display: inline-block;
}

.left-user-info .top-user-card .user-info-hd .user-img {
    margin-right: 2px;
    width: 72px;
    height: 72px;
    -webkit-box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, .15);
    box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, .15);
    opacity: 1;
    border: 6px solid #FFF;
    border-radius: 50%;
}

.left-user-info .top-user-card .user-info-hd .user-name {
    margin-bottom: 10px;
    width: 126px;
    font-size: 16px;
    font-weight: 700;
    color: #1D2129;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.left-user-info .top-user-card .user-info-bd {
    margin: 10px 0 8px;
    font-size: 14px;
    font-weight: 400;
    color: #C9CDD4;
    line-height: 16px;
}

.left-user-info .page-topic {
    margin-bottom: 12px;
    padding-left: 24px;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: #4E5969;
    line-height: 44px;
    background: #F2F3F5;
}

.personal-center-content {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 16px 0 100px;
    width: 1608px;
}

.nav-list {
    padding: 0 16px;
}

.nav-list>li {
    position: relative;
}

.nav-list .active {
    color: #06CD65;
    background: #E6FFEE;
    border-radius: 2px;
}

.nav-list>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 9px;
    font-size: 16px;
    color: #4E5969;
    line-height: 24px;
}

.nav-list .active>a {
    color: #06CD65;
    background: #E6FFEE;
    border-radius: 2px;
}

@media screen and (max-width: 1700px) {
    .right-user-content {
        max-width: 1064px;
    }
}
@media screen and (max-width: 1700px) {
    .personal-center-content {
        width: 1344px;
    }
}


</style>